// components/bottom_navigation/bottom_navigation.js
/**
 * 子组件
 * 底部导航栏 （首页 便民查询 我的）
 * 本组件固定在底部
 * 其他组件使用该组件的时候需要注意，不要让本组件覆盖到页面代码
 * 组件高度是全局变量 navigationHeight
 * 
 * @author hejiacheng
 * @date 2021-11-3
 */

var app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 显示选中的下标  0 首页（navigationList的第一个),  1 便民服务（navigationList的第2个）, 2 我的（navigationList的第3个）， -1 什么都没有选中的效果
    navigationIndex: 0,
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 导航栏高度
    navigationHeight: app.globalData.navigationHeight,
    // 统一背景颜色
    unifyBgColor: app.globalData.unifyBgColor,
    // 主色调
    mainColor: app.globalData.mainColor,
    // 导航集合
    navigationList: [{
        pagePath: "/pages/index/index",
        iconPath: "/image/component/bottom_navigation/home.png",
        iconPathActive: '/image/component/bottom_navigation/home_select.png',
        text: "首页",
        index: 0
      },
      {
        pagePath: "/pages/foldLine/foldLine",
        iconPath: "/image/component/bottom_navigation/fold_line.png",
        iconPathActive: '/image/component/bottom_navigation/fold_line_select.png',
        text: "趋势",
        index: 1
      },
      {
        pagePath: "/pages/mime/mime",
        iconPath: "/image/component/bottom_navigation/mime.png",
        iconPathActive: '/image/component/bottom_navigation/mime_select.png',
        text: "我的",
        index: 2
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 修改选中的导航
     */
    changeNavigation(e) {
      let index = e.currentTarget.dataset.index
      // 如果点击的下标和原来的下标一样，就返回
      if (index == this.data.navigationIndex) {
        return
      }
      // 点击的下标对应的项
      let navigationItem = this.data.navigationList[index]
      // 跳转对应的页面
      wx.reLaunch({
        url: navigationItem.pagePath,
      })
    }
  }
})